html, body {
  margin: 0;
  padding: 0;
  background: #424242;
  color: #776e65;
  font-family: "Microsoft Yahei", "Clear Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; 
}

.tile .tile-inner {
  border-radius: 3px;
  background: #eee4da;
  text-align: center;
  font-weight: bold;
  z-index: 10;
  font-size: 22px; 
}
@media screen and (max-width: 520px) {
  .tile .tile-inner {
    font-size: 10px; 
  } 
}

  .tile.tile-2 .tile-inner {
    background: #eee4da;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
  .tile.tile-4 .tile-inner {
    background: #ede0c8;
    box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0); }
  .tile.tile-8 .tile-inner {
    color: #f9f6f2;
    background: #f2b179; }
  .tile.tile-16 .tile-inner {
    color: #f9f6f2;
    background: #f59563; }
  .tile.tile-32 .tile-inner {
    color: #f9f6f2;
    background: #f67c5f; }
  .tile.tile-64 .tile-inner {
    color: #f9f6f2;
    background: #f65e3b; }
  .tile.tile-128 .tile-inner {
    color: #f9f6f2;
    background: #edcf72; 
    font-size: 22px;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286); }
    @media screen and (max-width: 520px) {
      .tile.tile-128 .tile-inner {
        font-size: 10px; 
      } }
  .tile.tile-256 .tile-inner {
    color: #f9f6f2;
    background: #edcc61;
    font-size: 22px;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048); }
    @media screen and (max-width: 520px) {
      .tile.tile-256 .tile-inner {
        font-size: 10px; 
      } }
  .tile.tile-512 .tile-inner {
    color: #f9f6f2;
    background: #edc850;
    font-size: 22px;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381); }
    @media screen and (max-width: 520px) {
      .tile.tile-512 .tile-inner {
        font-size: 10px; 
      } }
  .tile.tile-1024 .tile-inner {
    color: #f9f6f2;
    background: #edc53f;
    font-size: 22px;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571); }
    @media screen and (max-width: 520px) {
      .tile.tile-1024 .tile-inner {
        font-size: 10px; 
      } }
  .tile.tile-2048 .tile-inner {
    color: #f9f6f2;
    background: gray;
    font-size: 22px;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333); }
    @media screen and (max-width: 520px) {
      .tile.tile-2048 .tile-inner {
        font-size: 10px; 
      } }
  .tile.tile-4096 .tile-inner {
    color: #f9f6f2;
    background: black;
    font-size: 22px;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.85556), inset 0 0 0 1px rgba(0, 0, 0, 0.33333); }
    @media screen and (max-width: 520px) {
      .tile.tile-4096 .tile-inner {
        font-size: 10px; 
      } }
      
.game-container .game-message p {
  font-size: 30px;
  font-weight: bold;
  height: 60px;
  line-height: 60px;
  margin-top: 222px; 
}